<template>
    <div class="PhoneKill">
        <head-view></head-view>
        <div class="content">
            <!-- 电话号码 -->
            <div class="phone">
                <input type="tel" v-model="phoneValue" ref="userphone" maxlength="11" placeholder="请输入充值号码">
                <div class="colse" v-if="phoneValue" @click="closeNum"><img src="../../../assets/img/public/input_close.png" alt=""></div>
            </div>
            <!-- 广播 -->
            <div class="radio">
                <div class="radio_img">
                    <img src="../../../assets/img/PhoneKill/radio_img.png" alt="">
                </div>
                
                <div class="radio_row">
                    <div class="row_box" :class="{anim:animate==true}">
                        <p v-for="i in list1" :key="i.index">
                            <span>{{i.name}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <!-- 计时 -->
            <div class="timing">
                <div class="begin">即将开始</div>
                <div class="countdown">倒计时</div>
            </div>
            <!-- 幕布 -->
            <div class="curtain">
                <div class="curtain_left">0.01</div>
                <div class="curtain_right">
                    <div class="text">
                        <p>话费100元</p>
                        <p>限量5件</p>
                    </div>
                    <div class="remind" @click="remind_first">
                        <div>
                            <span><img src="../../../assets/img/public/clock.png" alt=""></span>
                            <span>提醒我</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner">
                <div class="banner_box" v-for="i in timeList" :key="i.index">
                    <div class="time">{{i.id}}</div>
                    <p class="seconds">秒杀价:￥0.01</p>
                    <p>话费10元</p>
                    <div class="clock_box" :class="i.isremind?'clock_box_first':'clock_box'" @click="remindMe(i)">
                        <div class="clock_img"><img src="../../../assets/img/public/clock.png" alt=""></div>
                        <div>提醒我</div>
                       <!-- <div>抢购中</div> -->
                       <!-- <div>已抢光</div> -->
                    </div>
                </div>
            </div>

            
        </div>
        
    </div>
</template>

<script>
    export default {
        data(){
            return{
                rowTime:0,
                radioHeight:1,
                scHeught:0,
                timeList:[
                    {id:1,isremind:false},
                    {id:2,isremind:false},
                    {id:3,isremind:false},
                    {id:4,isremind:false},
                    {id:5,isremind:false},
                    {id:6,isremind:false},
                ],
                list1:[
                    {name:111},
                    {name:222},
                    {name:333}

                ],
                firstTime:false,
                animate:false,
                phoneValue:''
            }
        },
        methods:{
            closeNum(){
                this.phoneValue = ''
            },
            remind_first(){
                this.timeList.forEach((i)=>{
                    if(i.id == 1){
                        i.isremind = true
                    }
                })
            },
            remindMe(e){
                this.timeList.forEach(i => {
                    if(e.id == i.id){
                        i.isremind = true
                    }
                });
            },
        },
        mounted(){
            this.rowTime = setInterval(()=>{
                this.animate=true;
                setTimeout(()=>{     
                    this.list1.push(this.list1[0]);  // 将数组的第一个元素添加到数组的
                    this.list1.shift();     //删除数组的第一个元素
                    this.animate=false;     
                },500)
             },3000)
        },
        beforeDestroy(){
            clearInterval(this.rowTime)
        }
    }
</script>

<style lang="scss" scoped>
@import '../../../assets/css/activity/PhoneKill/PhoneKill.scss'
</style>